// 计划页面：新增/编辑弹窗

import React from "react";
import {Button, Col, Form, Input, message, Modal, Row} from "antd";
import {
    ButtonLock, SelectCompanies,
    SelectPerson, SelectProjects, SelectState2,
} from "../../components/BaseComponent/forms";
import {zdfpApi} from "../../services/basic";
import moment from "moment";

class AddOrEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            title: "分配-详情"
        }
    }

    dataFormLabel = {}

    showModal = (handler, record) => {
        let title = "分配-详情";
        if (handler === "view") {
            title = "分配-详情";
        } else if (handler === "update") {
            title = "分配-编辑";
        } else if (handler === "create") {
            title = "分配-新增";
        }

        if (this.form) this.form.resetFields();
        this.id = handler === "create" ? null : record.id;
        this.setState({
            handler,
            title,
            visible: true
        }, () => {
            this.dateInit();
            if (["view", "update"].includes(handler)) {
                zdfpApi.getFpById(record.id).then(res => {
                    if (res.code === "1") {
                        const {yggh, yxxm, yybm, bl, ztbz, mrlzs} = res.data
                        this.form.setFieldsValue({yggh, yxxm, yybm, bl, ztbz, mrlzs})
                    }
                })
            }
        })
    }

    handleOk = () => {
        const api = this.state.handler === "create" ? zdfpApi.createFp : zdfpApi.updateFp;
        return new Promise((resolve, reject) => {
            this.form.validateFields().then(data => {
                api({
                    ...data,
                    id: this.id
                }).then(res => {
                    if (res.code !== "1") {
                        reject();
                        return
                    }
                    message.success('操作成功');
                    this.props.editItemDone();// 刷新
                    this.setState({
                        visible: false
                    }, () => {
                        resolve();
                    })
                }).catch(() => {
                    this.props.editItemDone();// 刷新
                    reject()
                })
            }).catch(e => {
                // 表单校验失败
                console.log(e.errorFields)
                reject();
            })
        })

    }

    handleCancel = () => {
        this.setState({
            visible: false
        })
    }

    dateInit = () => {
        const today = moment(new Date(), "YYYY-MM-DD");
        if (this.form) this.form.setFieldsValue({
            rq: today
        })
    }

    onFormChange = (data, e) => {
        const key = Object.keys(data)[0];
        const label = e ? e.children : null;
        this.dataFormLabel = {
            ...this.dataFormLabel,
            [key]: label
        }
    }

    render() {
        const required = {required: true, message: "此为必填项"}
        return (<Modal
            title={this.state.title}
            visible={this.state.visible}
            // onOk={this.handleOk}
            onCancel={this.handleCancel}
            maskClosable={false}
            footer={this.state.handler === "view" ? null : [
                <Button onClick={this.handleCancel}>取消</Button>,
                <ButtonLock onClick={this.handleOk} type="primary">确定</ButtonLock>
            ]}
        >
            <Form ref={form => this.form = form}>
                <Row>
                    <SelectPerson
                        colSpan={24}
                        label="选择人员"
                        placeholder="请选择人员"
                        keyword="yggh"
                        rules={[required]}
                    />
                    <Col span={24}>
                        <Form.Item
                            label="比例"
                            name="bl"
                            defaultValue={1}
                        >
                            <Input min={1} defaultValue={1} placeholder="请输入比例" type="number"></Input>
                        </Form.Item>
                    </Col>
                    <SelectProjects colSpan={24} rules={[required]}></SelectProjects>
                    <SelectCompanies colSpan={24} rules={[required]}></SelectCompanies>
                    <SelectState2 colSpan={24} defaultValue={1}></SelectState2>
                    <Col span={24}>
                        <Form.Item
                            label="每日留资数"
                            name="mrlzs"
                            defaultValue={1}
                        >
                            <Input min={0} defaultValue={1} placeholder="请输入比例" type="number"></Input>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>)
    }
}

export default AddOrEdit;